<template>
	<view class="uniPopup">
		<!-- $attrs  $listeners  
				可以把组件的事件和属性绑定到当前组件身上
		 -->
		<uni-popup ref="showpopup" v-bind="$attrs" v-on="$listeners" @change="change" class="uni-popups" :maskClick="ObjDatas.maskClick">
			<view class="popup_box">
				<view v-if="ObjDatas.title" class="title_boxs" :style="ObjDatas.TitleStyle" :class="ObjDatas.IsYtitle? 'on' :''">
					{{ObjDatas.title}}
				</view>
				<view class="popup_boxs" :style="'max-height:' + ObjDatas.scrollMaxH+';'" @click="closeRef()">
					<view>
						<view class="popup_con" v-if="$slots.default">
							<slot name="popup_con"></slot>
						</view>
						<view class="popup_con" v-else>
							<view class="top_img" v-if="ObjDatas.IsImgs">
								<!-- 对错图片 -->
								<text v-if="ObjDatas.IsImgsWrong" class="iconfont icon icon-duihao">&#xe633;</text>
								<text v-else class="iconfont icon icon-cuo">&#xe63d;</text>
								<!-- <image  v-if="ObjDatas.IsImgsWrong"  src="../../static/JkshowModald.png"></image>
								<image v-else src="../../static/JkshowModalx.png"></image> -->
							</view>
							<!-- 判断是否是数组 -->
							<view class="con_wz" v-if="Array.isArray(ObjDatas.content)">
								<text v-for="(item,idx) in ObjDatas.content" :key="idx" :style="item.style"
									:class="item.class || 't1'">{{item.txt || item}}</text>
							</view>
							<view class="con_wz" v-else>
								<text class="t1" :style="ObjDatas.constyle">{{ObjDatas.content || ''}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="btnsList">
					<view class="btn_box" v-if="ObjDatas.showCancel">
						<view class="btn btn1" :style="ObjDatas.cancelstyle" @tap="PopupChange(ObjDatas.Gocancel)"> {{ObjDatas.cancelTxt}}
						</view>
					</view>
					<view class="btn_box" v-if="ObjDatas.showConfirm">
						<view class="btn btn2" :style="ObjDatas.confirmstyle" @tap="PopupChange(ObjDatas.Goconfirm)"> {{confirmTxts}} </view>
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from './uni-popup.vue' // 弹出窗
	var countDownSetInt = null;
	export default {
		props: {
			title: { //顶部标题
				type: String,
				default: '提示'
			},
			TitleStyle: { //顶部标题样式
				type: String,
				default: ''
			},
			IsYtitle: { //标题是否显示一行
				type: Boolean,
				default: false
			},
			content: { //内部内容
				type: [String, Array],
				default: ''
			},
			showCancel: { //是否展示取消按钮
				type: Boolean,
				default: true
			},
			cancelstyle: { //取消样式
				type: String,
				default: ''
			},
			cancelTxt: { //取消文字
				type: String,
				default: '取消'
			},

			confirmTxt: { //确认文字
				type: String,
				default: '确认' 
			},
			confirmstyle: { //确认样式
				type: String,
				default: ''
			},
			maskClick: { //	蒙版点击是否关闭弹窗
				type: Boolean,
				default: false
			},
			countDown: { //倒计时时间
				type: [Number, String],
				default: 0
			},
			IsImgs: { //是否显示提示图片
				type: Boolean,
				default: false
			},
			IsImgsWrong: { //是否显示提示图片对号还是叉号
				type: Boolean,
				default: true
			},
			scrollMaxH: { //scroll最大高度
				type: [Number, String],
				default: '300rpx'
			},
			IsTips: { //是否自定义内容
				type: Boolean,
				default: false
			},
			constyle: { //一行文字时文字样式
				type: String,
				default: ''
			},
			showConfirm: { //是否展示确认按钮
				type: Boolean,
				default: true
			},
			Gocancel: { //自定义取消返回值
				type: [String,Number],
				default: 1
			},
			Goconfirm: { //自定义确认返回值
				type: [String,Number],
				default: 2
			}
		},
		components: {
			uniPopup
		},
		data() {
			return {
				confirmTxts: '', //确认文字
				Idx: 0,
				// countDownSetInt:null,
				ObjDatas: {},
				iscountDown:true//判断倒计时是否结束
			}
		},
		mounted() {
			this.confirmTxts =  this.confirmTxt, //确认文字
			this.ObjDatas = {
				title: this.title, //顶部标题
				IsYtitle: this.IsYtitle, //标题是否显示一行
				content: this.content, //内部内容
				showCancel: this.showCancel, //是否展示取消按钮
				cancelTxt: this.cancelTxt, //取消文字
				maskClick: this.maskClick, //	蒙版点击是否关闭弹窗
				countDown: this.countDown, //倒计时时间		
				IsImgs: this.IsImgs,
				IsImgsWrong: this.IsImgsWrong,
				confirmTxt: this.confirmTxt, //确认文字
				scrollMaxH: this.scrollMaxH, //scroll最大高度
				IsTips: this.IsTips, //是否需要额外提示
				constyle: this.constyle, //一行文字时文字样式
				cancelstyle: this.cancelstyle, //取消样式
				confirmstyle: this.confirmstyle, //确认样式
				TitleStyle: this.TitleStyle, //顶部标题样式
				showConfirm: this.showConfirm, //是否展示确认按钮
				Gocancel: this.Gocancel, //自定义取消返回值
				Goconfirm: this.Goconfirm, //自定义确认返回值							
			}
		},
		methods: {
			Jk_showModals(ObjData = {}) {
				console.log(ObjData)
				this.ObjDatas = {
					title: ObjData.title || this.title, //顶部标题
					IsYtitle: this.Isundefined(ObjData.IsYtitle, this.IsYtitle), //标题是否显示一行
					content: ObjData.content || this.content, //内部内容
					showCancel: this.Isundefined(ObjData.showCancel, this.showCancel), //是否展示取消按钮
					cancelTxt: ObjData.cancelTxt || this.cancelTxt, //取消文字
					maskClick: this.Isundefined(ObjData.maskClick, this.maskClick), //	蒙版点击是否关闭弹窗
					countDown: ObjData.countDown || this.countDown, //倒计时时间	
					IsImgs: this.Isundefined(ObjData.IsImgs, this.IsImgs),
					IsImgsWrong: this.Isundefined(ObjData.IsImgsWrong, this.IsImgsWrong),
					confirmTxt: ObjData.confirmTxt || this.confirmTxt, //确认文字
					scrollMaxH: ObjData.scrollMaxH || this.scrollMaxH, //scroll最大高度
					IsTips: this.Isundefined(ObjData.IsTips, this.IsTips), //是否需要额外提示-不关闭当前弹出新弹出新的弹出
					constyle: this.Isundefined(ObjData.constyle, this.constyle), //一行文字时文字样式
					cancelstyle: ObjData.cancelstyle || this.cancelstyle, //取消样式
					confirmstyle: ObjData.confirmstyle || this.confirmstyle, //确认样式
					TitleStyle: ObjData.TitleStyle || this.TitleStyle, //顶部标题样式
					Goconfirm: ObjData.Goconfirm || this.Goconfirm ,//自定义确认返回值
					Gocancel: ObjData.Gocancel || this.Gocancel ,//自定义取消返回值
					showConfirm: this.Isundefined(ObjData.showConfirm, this.showConfirm), //是否展示确认按钮
				}
				this.confirmTxts = ObjData.confirmTxt || this.confirmTxt, //确认文字
				this.open() //打开弹出

			},
			Isundefined(item, itme) { //判断是否是undefined的方法		
				return item == undefined || item == null ? itme : item;
			},
			PopupChange(type) {
				// type 1 取消 2确认	
				let {
					ObjDatas,iscountDown
				} = this
				if (this.Idx > 0 && type == 2) return;
				 //是否显示提示图片对号还是叉号 如果是叉号则全部都不处理直接关闭			
				if (!ObjDatas.IsImgsWrong) type = ObjDatas.Gocancel;//
				//如果倒计时没结束，点击的又不是取消按钮则不关闭弹出
				this.$emit('JkPopupChange', {type,iscountDown})
				if(!iscountDown && type != ObjDatas.Gocancel) return;
				if (type == ObjDatas.Gocancel || !ObjDatas.IsTips ) {	
					this.$refs['showpopup'].close()
				}
			},
			close(e) {
				this.$refs['showpopup'].close()
			},
			open(e) {
				this.$refs['showpopup'].open()
			},
			closeRef(e) {
				console.log("点击了中间弹出")
				// this.$refs.showpopup.close()
			},
			change(e) { // e监听当前弹窗变化
				uni.hideLoading();
				let show = e.show || '';
				this.countDownSetInt = null
				let confirmTxts = this.ObjDatas.confirmTxt
				let idx = this.ObjDatas.countDown * 1 || 0
				if (show) { //打开弹出		
					if (idx > 0) { //说明存在定时
						this.iscountDown = false
						this.confirmTxts = confirmTxts + '(' + idx + ')s'
						idx--
						countDownSetInt = setInterval(() => {
							
							this.confirmTxts = confirmTxts + '(' + idx + ')s'
							// console.log('countDownSetInt',countDownSetInt);
							if (idx <= 0) {
								this.iscountDown = true
								clearInterval(countDownSetInt) //关闭循环定时器
								countDownSetInt = null
								this.confirmTxts = this.ObjDatas.confirmTxt
							}
							idx--
							this.Idx = idx
							// console.log('idx2',idx);
						}, 1000)
					} else {
						countDownSetInt = null
						this.confirmTxts = this.ObjDatas.confirmTxt
					}

				} else { //关闭弹出
					clearInterval(countDownSetInt) //关闭循环定时器
					countDownSetInt = null
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
	  font-family: 'iconfont';  /* project id 3174403 */
	  src: url('');
	  src: url('?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_3174403_ka6bz6scgk.woff2') format('woff2'),
	  url('//at.alicdn.com/t/font_3174403_ka6bz6scgk.woff') format('woff'),
	  url('//at.alicdn.com/t/font_3174403_ka6bz6scgk.ttf') format('truetype'),
	  url('#iconfont') format('svg');
	}
	.uniPopup {
		.iconfont{
			font-family: iconfont;
		}
		background-color: rgba(0, 0, 0, 0);
		.title_boxs {
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx;
			padding-bottom: 0;
			display: block;

			&.on {
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}

		.popup_box {
			width: 100%;
			box-sizing: border-box;
			background-color: #262626;
		}

		.popup_boxs {
			width: 100%;
			display: block;
			overflow: hidden;
		}

		.popup_con {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			// padding-top: 0;

			.top_img {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.icon{
					width: 80rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					font-size: 48rpx;
					border-radius: 50%;
					color: #FFFFFF;
					background-color: #FBDB08;
				}
				.icon-duihao{
					
				}
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}

			.con_wz {
				width: 100%;
				display: block;
				padding: 30rpx 0;
				box-sizing: border-box;
				text-align: center;

				text {
					font-size: 26rpx;
					font-weight: 400;

					&.t1 {
						color: #D1D1D1;
					}

					&.t2 {
						color: #FFFFFF;
					}
				}
			}
		}

		.btnsList {
			width: 100%;
			display: flex;
			align-items: center;

			.btn_box {
				flex: 1;

				.btn {
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					display: block;
					font-size: 28rpx;
					font-weight: 500;

					&.btn2 {
						color: #3F3F3D;
						background-color: #FBDB08;
					}

					&.btn1 {
						background-color: #3F3F3D;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
